// -------------------------- 获取数据并渲染 --------------------------
function renderCategory() {
  axios.get('/my/category/list').then(res => {
    // console.log(res.data);
    let { status, data } = res.data;
    if (status === 0) {
      let str = '';
      data.forEach(item => {
        str += `<tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
              <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
              <button data-id="${item.id}" type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>`;
      });
      // 循环结束，把拼接得到的很多个tr放到tbody中
      $('tbody').html(str);
    }
  })
}

renderCategory();



// --------------------------------- 删除功能 -------------------------------------
$('tbody').on('click', '.del', function () {
  // $(this) 表示删除按钮； 不表示tbody
  let id = $(this).data('id');
  // 询问是否要删除？（对于敏感操作必须询问）
  layer.confirm('你确定不要我了吗？', function (index) {
    // do something
    // 确定，调用接口，发送请求
    axios.get(`/my/category/delete?id=${id}`).then(res => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        // 更新页面的数据
        renderCategory();
      }
    });
    layer.close(index);
  });
})


// --------------------------------- 添加功能 -------------------------------------
let addIndex;
// 1. 点击添加按钮，出现弹层
$('button:contains("添加类别")').on('click', function () {
  addIndex = layer.open({
    type: 1,
    title: '添加类别',
    // 2. 设置弹出的内容
    content: $('#tpl-add').html(),
    area: ['500px', '250px']
  });
})

// 3. 表单提交，发送ajax请求，完成添加
$('body').on('submit', '#add-form', function (e) {
  e.preventDefault();
  let data = $(this).serialize(); // 必须检查input的name
  axios.post('/my/category/add', data).then(res => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory(); // 更新页面数据
      layer.close(addIndex);
    }
  });
})



// --------------------------------- 修改功能 -------------------------------------
let editIndex;
// 1. 点击 编辑 按钮，出现弹层
$('tbody').on('click', 'button:contains("编辑")', function () {
  // 获取三个自定义属性值
  let shuju = $(this).data(); // 不给 data() 传递参数，表示获取全部的 data-xxx 属性
  // console.log(shuju); // {alias: "music", name: "音乐", id: 1}

  editIndex = layer.open({
    type: 1,
    title: '编辑类别',
    // 2. 设置弹出的内容
    content: $('#tpl-edit').html(),
    area: ['500px', '250px'],
    success: function () {
      // 3. 必须等弹层出来之后，保证表单已经存在了，input已经出现了，再数据回填
      // 使用layui的form模块，快速的数据回填
      let form = layui.form;
      form.val('edit', shuju);
    }
  });
})

// 4. 表单提交，完成修改
$('body').on('submit', '#edit-form', function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  // console.log(data); // 
  axios.post('/my/category/update', data).then(res => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory(); // 更新页面数据
      layer.close(editIndex);
    }
  });
})